<template>
	<div class="task">
	<!-top-->
	  <div class="clearFloat taskInf">
		  <div class="fl userImg">
			  <img src='images/liuyao.png'/>
				<div class="gender">
				  <img src='images/man.png' />
				</div>
			</div>
		  <div class="fl userTitle">
			  后台请求后返回的数据如
			</div>
			<div class="fl payMoney">
			  <div class="oerate">领</div>
			</div>
			<div class="line fr"></div>
		</div>

		<!-top-->
  <div class="clearFloat bgff">
		<div class="dateInf fl">
			<div class="date">
			<img src="../about/images/clock.png"/>
			<span>2017-05-21 ~ 2017-05-21</span>
		 </div>
			<div class="location mt5">
				<img src="../about/images/location.png" class="mr5"/>
				深圳市南山区科技园
			</div>
		</div>
		<div class="fr reward">1000元</div>
  </div>
	<!-top-->
	<div class="taskDetail bgff mt5">任务详情</div>
	<!-top-->
	<div class="textTask bgff mt5">启用并设置消息推送配置后，用户发给小程序的消息以及开发者需
	要的事件推送，都将被微信转发至该服务器地址中</div>
	<!-top-->
	<div class="taskImg bgff mt5 imgContaint">
	  <img id="" src="../../assets/logo.png" v-on:click = 'preImg'/>
	</div>
	<!-top-->
	<div class="soundContaint clearFloat mt5 bgff">
		<div class="fl soundImg">
			<img id="sound-{{ $index }}" src="../about/images/sound.png" v-on:click="recordPlay"/>
			<img id="sound-{{ $index }}" src="../about/images/stopPlay.png" v-on:click="recordStop" v-if= 'value.status==4'/>
		</div>
		<div class="fl soundDate">
			<span>{{value.showtime}}</span>
		</div>
  </div>
<!-dd-->
  <div class="taskDetail bgff mt5">瑶瑶的最近记录</div>
<!-最近记录-->
<div class="clearFloat mt5 bgff pd8 color88">
	<div class="fl userImg newUse">
		<img src='images/liuyao.png' class="vtm"/>
	</div>
	<div class="fl xiangya">
		<p>书序题目</p>
		<p class="f12 color88">2017-12-20/12:20</p>
		<p class="f12 color88">本次小象芽评级
       <img src='images/heart1.png' class="heart vtm"/>
			 <img src='images/heart1.png' class="heart vtm"/>
			 <img src='images/heart1.png' class="heart vtm"/>
			 <img src='images/heart.png' class="heart vtm"/>
		</p>
	</div>
	<div class="fl xy_status">
		  <p>完成</p>
			<p class="f12 mt15" style="margin-top:15px;text-decoration:underline">小象芽有话说</p>
	</div>
</div>

	</div>
</template>

<script>

</script>

<style scoped>
.taskInf{padding:10px 0;background-color:#fff;}
.userImg,.payMoney{width:15%;text-align:center;position:relative;}
.userImg img{width:40px;heihgt:40px;border-radius:50%;}
.gender{position:absolute;top:0;left:40px;}
.gender img{width:15px;height:15px;}
.userTitle{width:70%;height:40px;line-height:40px;font-size:18px;font-weight:bold;}
.payMoney{width:15%;margin:0 auto;}
.fl{float:left}
.fr{float:right}
.clearFloat:after{content:'';display:block;clear:both;visibility:hidden;}
.oerate{width:40px;height:40px;line-height:40px;margin:0 auto;font-size:20px;
border-radius:50%;background-color:#F5A623;font-weight:bold;}
.line{width:82%;border-bottom:1px solid #d0d0d0;margin-right:3%;margin-top:5px;}
.date img,.location img{width:20px;height:20px;vertical-align:middle;}
.date,.location{height:20px;line-height:20px;font-size:12px;color:#888888;}
.dateInf{width:75%;padding:0 10px;box-sizing:border-box;}
.mt5{margin-top:5px;}
.reward{width:20%;font-size:18px;line-height:45px;}
.bgff{background-color:#fff;}
.taskDetail{padding:8px;height:40px;line-height:40px;}
.textTask{min-height:40px;padding:8px;font-size:12px;color:#333;}
.imgContaint{width:100%;
box-sizing: border-box;}
.imgContaint{padding-left:8px;}
.imgContaint,.soundContaint{text-align:center;padding:8px;}
.imgContaint img{max-width:100%;border-radius:8px;}
.soundContaint{
width:100%;
box-sizing: border-box;
}
.soundDate{width:80px;margin-left:20px;height:40px;line-height:40px;}
.soundDate{text-align:center;}
.soundImg{height:40px;line-height:40px;}
.soundImg img{width:25px;height:25px;vertical-align:middle;}
.xiangya{width:60%;}
.f12{font-size:12px;}
.xiangya p{margin:0;padding:0;margin-left:5px;}
.color88{color:#888888;}
.pd8{padding:8px 0;}
.xy_status{width:25%;height:54px;}
.xy_status p{padding:0;margin:0;text-align:right;margin-right:8px;}
.bt0{margin-bottom:0;}
.vtm{vertical-align:middle;}
.newUse{heihgt:54px;line-height:54px;}
.mt15{margin-top: 15px;}
.heart{width:15px;height:15px;}
</style>
